import React, {Component} from 'react'

import pagesService from '../services/pagesService.js'

let bannerSwiper = null;

export default class Home extends Component {
	constructor(){
		super();
		this.state = {
			homeBanner: [],
			nowPlaying: [],
			comingSoon: []
		}
	}
	render(){
		return(
			<div class="page">
				
				<div class="home-banner">
					<div ref="homebanner" class="swiper-container">
					    <div class="swiper-wrapper">
					    	{
					    		this.state.homeBanner.map((item,index)=>{
					    			return(
					    				<div key={index} class="swiper-slide">
						    				<img src={item.imageUrl}/>
						    			</div>
					    			)
					    		})
					    	}
					    </div>
					</div>
				</div>
				
				<div class="home-list">
					<ul class="nowplaying-list">
					{
						this.state.nowPlaying.map((item,index)=>{
							return(
								<li key={index}>
									<img src={item.cover.origin} />
									<div class="film-detail">
										<h5>{item.name}</h5>
										<p>{item.cinemaCount}家影院上映 {item.watchCount}人购票</p>
										<span class="right grade">{item.grade}</span>
									</div>
								</li>
							)
						})
					}
					</ul>
					<div class="more">
						更多热映电影
					</div>
					<ul class="comingsoon-list">
					{
						this.state.comingSoon.map((item,index)=>{
							return(
								<li key={index}>
									<img src={item.imgpath} />
									<div class="film-detail">
										<h5 class="left">{item.name}</h5>
										<span class="right">{item.showdate}上映</span>
									</div>
								</li>
							)
						})
					}
					</ul>
					<div class="more">
						更多即将上映电影
					</div>
				</div>
				
			</div>
		)
	}
	componentWillMount(){//组件创建前
		//轮播图
		pagesService.getHomeBanner()
		.then((res)=>{
			this.setState({homeBanner: res});
			bannerSwiper.update();
		});
		//正在热映
		pagesService.getNowPlaying()
		.then((res)=>{
			this.setState({nowPlaying: res});
		});
		//即将上映
		pagesService.getComingSoon()
		.then((res)=>{
			//console.log(res);
			this.setState({comingSoon: res});
		});
	}
	componentDidMount(){//组件创建完成
		bannerSwiper = new Swiper(this.refs.homebanner,{
    		loop: true
		});
	}
	Updating (state){
		
	}
}
